import React, { FC, useEffect } from 'react'
import Myhead from '../../../components/myhead'
import {inject,observer} from 'mobx-react'
import { Toast } from 'antd-mobile'
const News:FC<any>=({
  classes
})=> {
  const {getClassList1,classList2}=classes
  useEffect(()=>{
    getClassList1()
  },[])
  return (
    <div className='paddingtop' style={{paddingBottom:"0.46rem"}}>
        <Myhead title='开放课程列表'></Myhead>
        {
          classList2&&classList2.map((item: any,index: any)=>(
            <div key={index} style={{background:"#fff",padding:"0.1rem",borderRadius:"0.1rem",width:"100%",height:"auto",marginBottom:"0.1rem"}}
            onClick={() =>
              Toast.show({
                content: `暂时不能选~${item.className}`
              })
            }
            >
              <div style={{display:"flex",padding:"0.05rem 0rem",justifyContent:"space-between",color:"#333",fontSize:"0.16rem"}}>
                    <span style={{fontWeight:700}}>{item.word}-{item.className}</span>
                    <span>{item.startTime}~{item.endTime}</span>
              </div>
              <div style={{padding:"0.05rem",fontSize:"0.14rem"}}>
                <span style={{fontWeight:700}}>任课老师：</span>{item.classTeacher}
              </div>
              <div style={{padding:"0.05rem",fontSize:"0.14rem"}}>
              <span style={{fontWeight:700}}>考核方式：</span>{item.checkWay}
              </div>
              <div style={{padding:"0.05rem",fontSize:"0.14rem",}}>
                <span style={{fontWeight:700,display:"inline-block",verticalAlign:"middle"}}>课程介绍：</span><span style={{display:"inline-block",width:"2.5rem",height:"0.22rem",whiteSpace:"nowrap",overflow:"hidden",verticalAlign:"middle",textOverflow:"ellipsis"}}>{item.classContent}</span>
              </div>
            </div>
          ))
        }
    </div>
  )
}
export default inject('classes')(observer(News))
